<template>
  <div class="com-container">
    <div class="com-chart" ref="seller_ref"></div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { markRaw, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import axios from 'axios'
//主题
import data from '../../../static/theme/chalk.json'
import data1 from '../../../static/theme/vintage.json'
import { useStore } from 'vuex'
const store = useStore()
const seller_ref = ref(null)
const chartInstance = ref(null)
const allData = ref(null)
let currentPage = 1 // 当前显示的页数
let totalPage = 0 // 一共有多少页
let timerId = null // 定时器的标识
// 初始化echartInstance对象
const initChart = () => {
  //初始化主题
  echarts.registerTheme('chalk', data)
  echarts.registerTheme('vintage', data1)
  //解决报错 用 markRaw淘一下转成不是响应式的
  chartInstance.value = markRaw(
    echarts.init(seller_ref.value, store.state.visual.theme)
  )
  const initOption = {
    title: {
      text: '▎商家销售统计',
      left: 20,
      top: 10
    },
    //设置图标坐标
    grid: {
      top: '20%',
      left: '3%',
      right: '6%',
      bottom: '3%',
      containLabel: true // 距离是包含坐标轴上的文字
    },
    xAxis: {
      type: 'value'
    },
    yAxis: {
      type: 'category'
      //   data: showData.map((item) => item.name)
    },
    //滑动样式
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'line',
        z: 0,
        lineStyle: {
          type: 'line',
          opacity: 0.3
        }
      }
    },
    series: [
      {
        type: 'bar',
        // data: showData.map((item) => item.value),
        label: {
          show: true,
          position: 'right',
          color: '#fff'
          //   textStyle: {
          //     color: 'white'
          //   }
        },
        itemStyle: {
          //渐变色
          color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            { offset: 0, color: '#5052EE' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#AB6EE5' }
          ])
        }
      }
    ]
  }
  chartInstance.value.setOption(initOption)
  chartInstance.value.on('mouseover', () => {
    clearInterval(timerId)
  })
  chartInstance.value.on('mouseout', () => {
    startInterval()
  })
}

//获取数据
const getData = () => {
  axios.get('../../../static/data/seller.json').then((res) => {
    allData.value = res.data
    allData.value.sort((a, b) => {
      return a.value - b.value
    })
    totalPage = Math.ceil(allData.value.length / 5)
    updateChart()
    startInterval()
  })
}
//更新图表
const updateChart = () => {
  const start = (currentPage - 1) * 5
  const end = currentPage * 5
  const showData = allData.value.slice(start, end)
  const dataOption = {
    yAxis: {
      data: showData.map((item) => item.name)
    },
    series: [
      {
        data: showData.map((item) => item.value)
      }
    ]
  }
  chartInstance.value.setOption(dataOption)
}
//定时去改变图表信息
const startInterval = () => {
  if (timerId) {
    clearInterval(timerId)
  }
  timerId = setInterval(() => {
    currentPage++
    if (currentPage > totalPage) {
      currentPage = 1
    }
    updateChart()
  }, 3000)
}
// 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
const screenAdapter = () => {
  const titleFontSize = (seller_ref.value.offsetWidth / 100) * 5
  //分辨率大小相关的配置项
  const adapterOption = {
    title: {
      textStyle: {
        fontSize: titleFontSize
      }
    },
    //滑动样式
    tooltip: {
      axisPointer: {
        lineStyle: {
          width: titleFontSize
        }
      }
    },
    series: [
      {
        barWidth: titleFontSize,
        itemStyle: {
          borderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0]
        }
      }
    ]
  }
  chartInstance.value.setOption(adapterOption)
  chartInstance.value.resize()
}
onMounted(() => {
  //初始化配置
  initChart()
  //初始化数配置
  getData()
  window.onresize = screenAdapter
  //   初始化分辨率配置
  screenAdapter()
})
onBeforeUnmount(() => {
  clearInterval(timerId)
  window.onresize = null
})
defineExpose({
  screenAdapter
})
watch(
  () => store.state.visual.theme,
  () => {
    chartInstance.value.dispose()
    initChart() // 重新以最新的主题名称初始化图表对象
    screenAdapter() // 完成屏幕的适配
    updateChart() // 更新图表的展示
  }
)
</script>

<style lang="scss" scoped></style>
